<template>
	<div>
		<Row>
			<Col style="width: 453px;margin: 151px auto;">
			<Card dis-hover>
				<p slot="title">登陆
					<router-link to="/reg" style="float:right;">还没有账号？</router-link>
				</p>
				<Form ref="formItem" :model="formItem" :label-width="80" :rules="formDynamic">
					<FormItem label="用户名" prop="name">
						<Input v-model="formItem.name" placeholder="请输入用户名" />
					</FormItem>
					<FormItem label="密码" prop="key">
						<Input v-model="formItem.key" placeholder="请输入密码" />
					</FormItem>
					<FormItem label="记住我？">
						<i-switch v-model="formItem.switch" size="large">
							<span slot="open">On</span>
							<span slot="close">Off</span>
						</i-switch>
					</FormItem>
					<FormItem>
						<Button type="primary" @click="handleSubmit('formItem')" :loading=loading>登录</Button>
						<Button style="margin-left: 8px" @click="handleReset('formItem')">重置</Button>
					</FormItem>
				</Form>
			</Card>
			</Col>
		</Row>
	</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions,mapState } = createNamespacedHelpers("Login");
export default {
	data() {
		return {
		formItem: {},
		formDynamic: {
			name: [
				{ required: true, message: "用户名不能为空", trigger: "blur" }
			],
			key: [{ required: true, message: "密码不能为空", trigger: "blur" }]
		}
		};
	},
	methods: {
		handleReset(name) {
			this.$refs[name].resetFields();
		},
		handleSubmit(name) {
			this.$refs[name].validate(valid => {
					if (valid) {
						this.doLogin(this.formItem).then(()=>{
							this.$Message.success("登陆成功!");
							this.$router.push('/main')
						}).catch(()=>{
							this.$Message.error("用户名或密码错误!");
						})
					}
			});
		},
		...mapActions(["doLogin"])
	},
	computed:{
		...mapState(['loading'])
	}
};
</script>
